<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
		<link rel="stylesheet" href="http://yui.yahooapis.com/2.2.2/build/fonts/fonts-min.css">		
		<link rel="stylesheet" href="http://yui.yahooapis.com/2.2.2/build/container/assets/container.css">
		<link rel="stylesheet" href="http://yui.yahooapis.com/2.2.2/build/tabview/assets/tabview.css">
		<link rel="stylesheet" href="http://yui.yahooapis.com/2.2.2/build/tabview/assets/border_tabs.css">
		<link rel="stylesheet" href="http://yui.yahooapis.com/2.2.2/build/datatable/assets/datatable.css">
		<link rel="stylesheet" href="http://yui.yahooapis.com/2.2.2/build/logger/assets/logger.css">
		
		<style type="text/css">
		    /* custom css*/
		    body {font-family:arial}
			
		    /* CSS FOR DataTable */	
		    .dpu-dt {margin:1em;}
		    .dpu-dt table {border-collapse:collapse;}
		    .dpu-dt th, .dpu-dt td {border:1px solid #000;padding:.25em;}
		    .dpu-dt th {background-color:#BEDAFF}
		    .dpu-dt.yui-dt-odd {background-color:#eee;} /*light gray*/
		    .dpu-dt em {font-style:italic;}
		    .dpu-dt strong {font-weight:bold;}
		    .dpu-dt .big {font-size:136%;}
		    .dpu-dt .small {font-size:77%}
		    .dpu-dt .yui-dt-selected {background-color:#000;color:#FFF;} /*white on black*/
		    .dpu-dt .yui-dt-editable.yui-dt-highlight {background-color:#BEDAFF;} /*light blue*/
		  
		    /*CSS For Auto Complete*/
		    .filter {position:relative;padding:1em;}
		    .filterForm {position:relative;margin:1em;width:15em;}/* set width of widget here*/
		    .filterInput {position:absolute;width:100%;height:1.4em;}
		    .filterMatch {position:absolute;top:1.7em;width:100%;}
		    .filterMatch .yui-ac-content {position:absolute;width:100%;height:11em;border:1px solid #404040;background:#fff;overflow:auto;overflow-x:hidden;z-index:9050;}
		    .filterMatch .yui-ac-shadow {position:absolute;margin:.3em;width:100%;background:#a0a0a0;z-index:9049;}
		    .filterMatch ul {padding:5px 0;width:100%;}
		    .filterMatch li {padding:0 5px;cursor:default;white-space:nowrap; font-size:small}
		    .filterMatch li.yui-ac-highlight {background:#ff0;}
		</style>           
		
		<style type="text/css">
		    /* custom css*/
		    body {font-family:arial}
			
		    /* CSS FOR DataTable */	
		    #elDataTable {margin:1em;}
		    #elDataTable table {border-collapse:collapse;}
		    #elDataTable th, #elDataTable td {border:1px solid #000;padding:.25em;}
		    #elDataTable th {background-color:#BEDAFF}
		    #elDataTable.yui-dt-odd {background-color:#eee;} /*light gray*/
		    #elDataTable em {font-style:italic;}
		    #elDataTable strong {font-weight:bold;}
		    #elDataTable .big {font-size:136%;}
		    #elDataTable .small {font-size:77%}
		    #elDataTable .yui-dt-selected {background-color:#000;color:#FFF;} /*white on black*/
		    #elDataTable .yui-dt-editable.yui-dt-highlight {background-color:#BEDAFF;} /*light blue*/
		  </style>
		
 		  <style>
			body { background:#eee }
		  </style>
				
	</head>
	<body>
		<div id="elbody">
			<div id="elMainMenu" class="yui-navset">
				<ul class="yui-nav">
	                <li class="selected"><a href="#Home"><em>Home</em></a></li>			
					<li>
						<a href="#Dogs"><em>Dogs</em></a> 
					</li>
					<li>
						<a href="#Phonebook"><em>Phonebook</em></a> 
					</li>
					<li>
						<a href="#Notebook"><em>Notebook</em></a> 
					</li>			
					<li>
						<a href="#Log"><em>Log</em></a> 
					</li>			
				</ul>
			</div>		
	
			<div id="elContent">
	       		<div id="elHomeView" >
	            	<p>Welcome to Application Layout!</p>            
				    <ul>
				      <li>
					  	Essentially, a client application is essentially a set of interrelated views. 
						In a conventional web application, the views are often server pages. 
						In an Ajax application, the views are often widgets.  
				      </li>
				      <li>
					  	This example demonstrates using various widgets within the same application.
						Each widget is placed on its own overlay. 
						The tabs on the menubar show and hide the overlays as needed. 
						Each widget is created on demand, the first time its tab is activated. 
				      </li>
				    </ul>			
	        	</div>
			
				<div id="elDogsView">
					<div id="elDogTable"></div>				
					<div id="elDogForm" ></div>							
				</div>
				
				<div id="elPhonebookView">
			       <div id="elPhonebookTabView" class="yui-navset">
			            <ul class="yui-nav">
			                <li class="selected"><a href="#list"><em>List Entries</em></a></li>
			                <li><a href="#edit"><em>Edit Entry</em></a></li>
			            </ul>
			            <div class="yui-content">
							<div id="elPhonebookFormList">
			    	            <div id="elPhonebookDataTable" class="dpu-dt"></div>				
								<div class="filter">
			        				<form id="elPhonebookForm">
			             				<p style="font-weight:bold">Filter Entries by:
			             				<select id="elPhonebookForm_item" onchange="YAHOO.my.oPhonebookView.oContent.onFilterChange()">
			                				<option value="last_name" selected="selected">Last Name</option>
			                				<option value="first_name">First Name</option>
			                				<option value="username">Username</option>
			            				</select>
			             				</p>
			            				<div class="filterForm">
										    <p>
			                				    <input class="filterInput" id="elPhonebookForm_input" />
										    </p>
			                				<div class="filterMatch" id="elPhonebookForm_match"></div>
			            				</div>
			         				</form>
			    			    </div>			
							</div>
							<div id="elelPhonebookFormEdit">
					            <div id="elPhonebookDataForm"></div>				
							</div>
			            </div>
			        </div>				
				</div>
				
				<div id="elNotebookView">
				
				</div>
				
				<div id="elLogView">
					<div id="elLogReader"></div>							
				<div>
			</div>
			<div class="ft">
				<hr />
			</div>
		</div>
		<div id="scripts">
			<!-- Patch for IE setAttribute issue [http://delete.me.uk/2004/09/ieproto.html] -->
			<!--[if IE]>  
			    <script type="text/javascript" src="../../build/extras/ieproto/attributes.js"></script>
			    <style type="text/css">
			        * { behavior: url(../../build/extras/ieproto/attributes.htc); }
			    </style>
			<![endif]-->  
			<!-- Container -->
			<script src="http://yui.yahooapis.com/2.2.2/build/yahoo-dom-event/yahoo-dom-event.js"></script>
			<script src="http://yui.yahooapis.com/2.2.2/build/dragdrop/dragdrop-min.js" ></script>
			<script src="http://yui.yahooapis.com/2.2.2/build/container/container-min.js"></script>
			<!-- DataTable/DataForm -->
			<script src="http://www.json.org/json.js"></script>
			<script src="http://yui.yahooapis.com/2.2.2/build/datasource/datasource-beta-min.js"></script>
			<script src="../../build/patched/datatable-beta-debug-patched.js"></script>
			<script src="../../build/dataform/flevbase-debug-beta.js"></script>
			<script src="http://yui.yahooapis.com/2.2.2/build/autocomplete/autocomplete-min.js"></script>
			<!-- Yazaar Source files -->
			<script src="../../build/dataform/dataform-debug-beta.js"></script>
			<!-- jc21 validator -->
			<script src="../../build/extras/jc21/validate-min.js"></script>			
			<!-- LogReader -->
			<script src="http://yui.yahooapis.com/2.2.2/build/logger/logger-min.js"></script>
			<!-- DPU RowFilterTable source (extends YUI version) -->   
			<script src="../../build/extras/dpu/RowFilterDataTable.js" ></script>
			<script src="../../build/extras/dpu/RowFilter.js" ></script>
			<!-- TabView -->
			<script src="http://yui.yahooapis.com/2.2.2/build/element/element-beta-min.js"></script>
			<script src="http://yui.yahooapis.com/2.2.2/build/tabview/tabview-min.js"></script>
			
			<script src="../../build/extras/crockford/remedial.js" ></script>			
			<script src="../dataform/tutorial-data.js"></script>

			<script>
				YAHOO.namespace("my");
				
				YAHOO.my.oPhonebookData = { 
				    result : [
						{entry_key: 'c5b6bbb1-66d6-49cb-9db6-743af6627828', last_name: 'Beeblebrox ', first_name: 'Zaphod ', extension: '555-123-4565', username: 'zaphie ', hired: '04/01/1978', hours: -1, editor: '1'},
					    {entry_key: '7c424227-8e19-4fb5-b089-423cfca723e1', last_name: 'Yooden', first_name: 'Vranx', extension: '555-123-4566', username: 'conker', hired: '04/01/1978', hours: 37.5, editor: '1'},
					    {entry_key: '9320ea40-0c01-43e8-9cec-8fb9b3928c2c', last_name: 'Halfrunt', first_name: 'Gag', extension: '555-123-4567', username: 'ziggy', hired: '04/01/1978', hours: 7, editor: '0'},
						{entry_key: '3b27c933-c1dc-4d85-9744-c7d9debae196', last_name: 'Android', first_name: 'Marvin', extension: '555-123-4568', username: 'blue', hired: '06/15/1978', hours: 161, editor: '1'},
				    	{entry_key: '554ff9e7-a6f5-478a-b76b-a666f5c54e40', last_name: 'McMillan', first_name: 'Tricia', extension: '555-123-4569', username: 'trillian', hired: '05/28/1978', hours: 37.5, editor:'0'},
						]
					};
				// 	{entry_key: 'a4065cc1-b59d-4d0d-8210-c3757e686e6c', last_name: 'Prefect', first_name: 'Ford', extension: '555-123-4570', username: 'peanut', hired: '07/26/1978', hours: 35, editor:'1'},
				// 	{entry_key: '59a5c1da-9750-4b2c-8fcb-833bd16aca26', last_name: 'Dent', first_name: 'Arthur', extension: '555-123-4571', username: 'monk', hired: '07/26/1978', hours: 35, editor:'1'}
				
				YAHOO.my.Events = function() {
				    this.createEvent("phonebookList")
				    return this;
				}
				YAHOO.augment(YAHOO.my.Events, YAHOO.util.EventProvider);
				YAHOO.my.events = new YAHOO.my.Events();
				
				YAHOO.my.events.onPhonebookListReturn = function(oData) {
				    YAHOO.log("phonebookList Event");
				    YAHOO.my.events.fireEvent("phonebookList", oData);	
				}
				
				YAHOO.my.events.isLoaded = false;
				
				YAHOO.my.events.onPhonebookLoaded = function(oData, oSelf) {
					var isLoaded = YAHOO.my.events.isLoaded;
					if (isLoaded) return;
					isLoaded = true;
					// Change title when tab changes
				    var onActiveTabChange = function(e) {
						YAHOO.my.setTitle(oSelf.sTabView, oSelf.oTabView.get('activeIndex'));
					}
					oSelf.oTabView.on('activeTabChange', onActiveTabChange);     
				}
								
				YAHOO.my.Phonebook = function() {
				    var oSelf = object(FlevBase);                   
				    oSelf.oColumnHeaders = [
				        {key:"first_name", text:"First Name", sortable:true, resizeable:true, editor:"textbox", formClassName: "required", formTitle: "Enter employee's first name"},  
				        {key:"last_name", text:"Last Name", sortable:true, resizeable:true, editor:"textbox", formClassName: "required", formTitle: "Enter employee's last name"},  
				        {key:"extension", text:"Extension", sortable:true, resizeable:true, editor:"textbox", formClassName: "required", formTitle: "Enter extension or telephone number"},  
				        {key:"username", text:"Username", sortable:true, resizeable:true, editor:"textbox", formClassName: "required", formTitle: "Enter employee's login name"},  
				        {key:"hired", text:"Hire Date", sortable:true, resizeable:true, editor:"textbox", formClassName: "required", formTitle: "Enter hire date as MM/DD/YYYY"},  
				        {key:"hours", text:"Hours", sortable:true, resizeable:true, editor:"textbox", formClassName: "required, validate-number", formTitle: "Enter hours scheduled per work week as a number"},  
				    ];       
				
				    oSelf.oConfigs = {
				        caption: "EntryList", 
				        summary: "List of matching entries",
				        paginator:true,
				        paginatorOptions: {
				            rowsPerPage: 2, 
				            dropdownOptions: [2,20,200]
				        },
				        rowSingleSelect: true                
				    };            
				
				    oSelf.oResponseSchema = {
				        fields: ["entry_key","last_name","first_name","extension","username","hired","hours","editor"]
				    };            
				
				    oSelf.sItemName = "last_name";
				    
				    oSelf.sDataTable = "elPhonebookDataTable";
				    oSelf.sDataForm = "elPhonebookDataForm";
				    oSelf.sTabView = "elPhonebookTabView";
				    oSelf.sForm = "elPhonebookForm";
				
				    YAHOO.my.events.subscribe("phonebookList", oSelf.load, oSelf);    
				    // Home.rpc.entryList(YAHOO.my.events.onPhonebookListReturn).call(ANVIL.channel); // livedatabase
				    YAHOO.my.events.subscribe("phonebookList", YAHOO.my.events.onPhonebookLoaded, oSelf);
				
				    YAHOO.my.events.onPhonebookListReturn(YAHOO.my.oPhonebookData); // static data
				
				    return oSelf;
				};
				YAHOO.augment(YAHOO.my.Phonebook, YAHOO.util.EventProvider);				
				
				YAHOO.my.VIEW_CONFIG = {visible:false}; // TODO: Define View and Views classes

				YAHOO.my.HomeView = function(sElement,sTitle) {
					var oSelf = new YAHOO.widget.Overlay(sElement, YAHOO.my.VIEW_CONFIG );
					oSelf.sTitle = sTitle;
					oSelf.render();
					return oSelf;				
				}
				
				YAHOO.my.DogsView = function(sElement,sTitle,sTable,sForm) {

					oSelf = new YAHOO.widget.Panel(sElement,YAHOO.my.VIEW_CONFIG);	
					oSelf.sTitle = sTitle;
					// oSelf.oFormView = new YAHOO.widget.Dialog(sForm);											
	
					var oDataTable = new YAHOO.widget.DataTable(sTable, oColumnSet, oDataSource, {rowSingleSelect: true});

					// Enable DataTable Row Selection
					oDataTable.subscribe("cellClickEvent",oDataTable.onEventSelectRow);
	
					// Create our own event for selecting the record behind a row
					oDataTable.createEvent("recordSelectEvent");				
	
					// Raise our event when a row is selected
					var onRowClickEvent = function(oArgs) {
					    var dt = oDataTable;
					    var rs = dt.getRecordSet();
					    var row = dt.getSelectedRecordIds();
					    if (row.length===0) {
					        dt.getRow(0); // No row was selected
					        row = dt.getSelectedRecordIds();
					    }
					    var oRecord = rs.getRecord(row[row.length-1]); // ISSUE: YUI 2.0.0 Returns row selected on each page
					
					  // Raise RecordSelectEvent with payload
					  this.fireEvent("recordSelectEvent",{record:oRecord});
					  YAHOO.log("Selected Record: " + oRecord.toJSONString());
					}
					
					// Subscribe our event to a native DataTable event
					oDataTable.subscribe("cellClickEvent", onRowClickEvent); // TODO: "eventSelectRow" ?
	
					// Setup DataForm
					var oConfigs = {oDataTable: oDataTable};
					var oDataForm = new YAHOO.yazaar.widget.DataForm(sForm, oColumnSet, oDataSource, oConfigs);
					
					// Pre-select the first row
					oDataTable.select(oDataTable.getRow(0));				
	
					// populate form
					var onRecordSelectEvent = function () {
					  oDataForm.populateForm();
					  oDataForm.isActive = true;
					}
					
					// subscribe our record select to our table's record select
					oDataTable.subscribe("recordSelectEvent", onRecordSelectEvent);	
					oSelf.render();
					// oSelf.oFormView.render();
					
					// retain components for future reference
					oSelf.oTable = oDataTable;
					oSelf.oForm =oDataForm; 
					
					return oSelf;					
				}
				
				YAHOO.my.PhonebookView = function(sElement,sTitle) {
					var oSelf = new YAHOO.widget.Overlay(sElement, YAHOO.my.VIEW_CONFIG);
					oSelf.sTitle = sTitle;
					oSelf.oContent = new YAHOO.my.Phonebook();
					return oSelf;
				}
				
				YAHOO.my.NotebookView = function(sElement,sTitle) {
					var oSelf = new YAHOO.widget.Overlay(sElement, YAHOO.my.VIEW_CONFIG);
					oSelf.sTitle = sTitle;
					return oSelf;
				}
				
				YAHOO.my.LogView = function(sElement,sTitle,sLogger) {
					var oSelf = new YAHOO.widget.Overlay(sElement, YAHOO.my.VIEW_CONFIG);
					oSelf.sTitle = sTitle;
					var oLogReader = new YAHOO.widget.LogReader(sLogger);										
					oSelf.render();
					return oSelf;					
				}
				
				YAHOO.my.Views = function(aViews) {
					var oSelf = new YAHOO.widget.OverlayManager();
					// ModuleManager sorts the array by zindex, so keep our own copy
					var a = []; 
					for each (var v in aViews) {
						a.push(v);
					}
					oSelf.aSequence = a;  
					 // TODO: Override register or give view an index property
					oSelf.register(aViews); 				
					oSelf.activeViewChange = function(nIndex,oViews) {
						var aSequence = oViews.aSequence; 
						var nLength = aSequence.length;
						var nView = (nIndex<nLength) ? nIndex : 0; 
						var oView = aSequence[nView];
						oViews.hideAll();
						document.title = oView.sTitle + " (" + nIndex + ")";
						oViews.focus(oView);
						oView.show(); 
					}
					return oSelf;
				}
				
				YAHOO.my.MainMenu = function (sElement) {
				 	var oSelf = new YAHOO.widget.TabView(sElement);
					oSelf.on("contentReady",function() {						
					    var onActiveTabChange = function(e) {
    	    				var nIndex = oSelf.get('activeIndex');
							YAHOO.my.oViews.activeViewChange(nIndex,YAHOO.my.oViews); // TODO: Fire another event
						}	
						oSelf.on('activeTabChange', onActiveTabChange);     						
					});
					return oSelf;
				}

				YAHOO.my.load = function () {

					YAHOO.my.oMainMenu = new YAHOO.my.MainMenu("elMainMenu");

					YAHOO.my.oHomeView = new YAHOO.my.HomeView("elHomeView","Home");
					YAHOO.my.oDogsView = new YAHOO.my.DogsView("elDogsView","Dogs","elDogTable","elDogForm");
					YAHOO.my.oPhonebookView = new YAHOO.my.PhonebookView("elPhonebookView","Phonebook");
					YAHOO.my.oNotebookView = new YAHOO.my.NotebookView("elNotebookView","Notebook");
					YAHOO.my.oLogView = new YAHOO.my.LogView("elLogView","Log","elLogReader");
					
					var aViews = [YAHOO.my.oHomeView,
						YAHOO.my.oDogsView,
						YAHOO.my.oPhonebookView,
						YAHOO.my.oNotebookView,
						YAHOO.my.oLogView]
						
					YAHOO.my.oViews = new YAHOO.my.Views(aViews); 
	
				};	// end load			
 				
				YAHOO.util.Event.onDOMReady(YAHOO.my.load);
			</script>
		</div>		
	</body>
</html>
